<template>
    <div class="main-pagination" v-if="total>size">
        <el-pagination background layout="prev, pager, next"  :total="total" @current-change="change" :page-size="size" :pager-count="5"></el-pagination>
    </div>
</template>

<script>
import'../assets/css/fonts/iconfont.css'


export default {
  props:{
      total:{
        type: Number,
      },
      size:{
        type: Number,
      }
  },
  data(){
    return{
    }
  },
  computed:{

  },
  watch:{

  },
  mounted(){

  },
  methods:{
    change(index){
        var index = index;
        this.$emit('pageChange', index);
    }
  }
}
</script>
<style lang="less" >
    .main-pagination{
        .el-pagination{
          text-align:center;
        }
        .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
            width: 30px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
        }
        .el-pagination.is-background .el-pager li:not(.disabled).active{

            background: #0076ca;
        }
        .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev{
            background: #0076ca;
            color:#fff;
        }
    }
</style>
